<template>
  <section>
    <van-nav-bar title="新闻" fixed placeholder safe-area-inset-top />
  </section>
  <!-- 搜索栏 -->
  <section>
    <van-search v-model="keyword" @keyup.enter="searchByKeyword(keyword)" placeholder="请输入搜索关键词" />
  </section>
  <!-- 布局采用 左图右文 -->
  <ul v-if="hotNewsList.length > 0" class="hot-news-content">
    <li v-for="(item, index) in hotNewsList" :key="index" @click="go(item.url)">
      <!-- 内容区域 -->
      <div class="new-list">
        <!-- 左侧图片 -->
        <div class="new-img">
          <img :src="item.imgsrc" alt="新闻图片">
        </div>
        <!-- 右侧文字 -->
        <div class="new-content van-multi-ellipsis--l2">
          <div class="new-title">{{ item.title }}</div>
          <!-- 出版社和发行日期 -->
          <div class="new-info">
            <div>出版社：{{ item.source }}</div>
            <div>发行日期：{{ item.mtime }}</div>
          </div>
        </div>
      </div>
    </li>
    <!-- 回到顶部 -->
  </ul>
  <van-empty v-else image="network" description="网络出错，请稍后再试" />
  <van-back-top right="15vw" bottom="10vh" />
</template>
<script setup>
import { ref } from "vue";
import { getHotNewsList } from '@/api/SearchList.js'

const keyword = ref('')

const hotNewsList = ref([])


hotNewsList.value = getHotNewsList()

const go = (url) => {
  location.href = url
}

const searchByKeyword = (keyword) => {
  // console.log(keyword)
  hotNewsList.value = hotNewsList.value.filter(item => item.title.includes(keyword))
  // console.log(hotNewsList.value)
}
</script>
<style scoped lang="scss">
.hot-news-content {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 10px;
  /* 防止图片溢出 */
  overflow: hidden;
  /* 浅灰色背景 */

  background-color: #f5f5f5;

  .new-list {
    display: flex;
    margin-bottom: 5px;

    .new-img {
      width: 200px;
      height: 100px;
      margin-right: 10px;

      img {
        width: 100%;
        height: 100%;
        border-radius: 10px;
        object-fit: cover;
      }
    }

    .new-content {
      .new-title {
        font-weight: 600;
        color: #333;
      }

      .new-info {
        margin-top: 5px;
        color: #999;
        font-size: 10px;
      }
    }
  }
}
</style>